import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-form';
import type { FC } from 'react';
import { useModel } from 'umi';

type ChangePasswordFormProps = {
  visible: boolean;
  current: API.User | undefined;
  onCancel: () => void;
  onSubmit: (values: API.User) => Promise<void>;
};

const ChangePasswordForm: FC<ChangePasswordFormProps> = (props) => {
  const { visible, current, onCancel, onSubmit } = props;
  if (!visible) {
    return null;
  }

  const { getProductOptions } = useModel('useGlobalModel', (model) => ({
    getProductOptions: model.getProductOptions,
  }));

  const productOptions = getProductOptions(false);

  return (
    <ModalForm<API.User>
      layout="horizontal"
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 18 }}
      open={visible}
      initialValues={current}
      //preserve={false}
      // trigger={<>{children}</>}
      title={'修改密码'}
      width={640}
      onFinish={onSubmit}
      modalProps={{
        onCancel: onCancel,
        //destroyOnClose: true,
        maskClosable: false,
      }}
    >
      <ProFormSelect
        name="productId"
        label="产品"
        options={productOptions}
        readonly={true}
      />
      <ProFormText name="username" label="用户名" readonly />
      <ProFormText
        name="password"
        label="密码"
        rules={[{ required: true, message: '请输入密码' }]}
        placeholder="请输入密码"
      />
    </ModalForm>
  );
};

export default ChangePasswordForm;
